<template>
	<div class="panel">
		<div class="form">
			<a-form
			    :form="form"
			    @submit="handleSubmit"
			  >
			    <a-form-item>
			      <a-input
			      	size="large"
			      	placeholder="用户名"
			        v-decorator="[
			          'name',
			          {rules: [{ required: true, message: '请输入用户名' }]}
			        ]"
			      >
			      	<a-icon slot="prefix" type="user" />
			      </a-input>
			    </a-form-item>
			    <a-form-item>
			      <a-input
			      	size="large"
			      	type="password"
			      	placeholder="密码"
			        v-decorator="[
			          'password',
			          {rules: [{ required: true, message: '请输入密码' }]}
			        ]"
			      >
			      	<a-icon slot="prefix" type="lock" />
			      </a-input>
			    </a-form-item>
			    <a-form-item>
			    	<a-button size="large" type="primary" class="submit" html-type="submit">登录</a-button>
			    </a-form-item>
			</a-form>
		</div>
	</div>
</template>

<script>
	import Vue from 'vue'
	import { Form, Input, Icon, Button } from 'ant-design-vue'

	Vue.use(Form);
	Vue.use(Input);
	Vue.use(Icon);
	Vue.use(Button);
	
	export default {
		name: 'Login',
		// components: {
		// 	Form,
		// 	Icon,
		// 	Input,
		// 	Button
		// },
		data() {
			return {
				form: this.$form.createForm(this),
			};
		},
		methods: {
			handleSubmit(e) {
				e.preventDefault();
				this.form.validateFields((err, values) => {
					if (!err) {
						this.$router.push({
							path: '/'
						})
					}
				});
			}
		}
	}
</script>

<style scoped lang="less">
	@import '../../assets/style/themes/default.less';

	.panel {
		width: 388px;
		margin: 0 auto;

		.form {
			:global(.ant-input-prefix) {
				color: @disabled-color;
				font-size: @font-size-base;
			}
			.submit {
				width: 100%
			}
		}

		@media screen and (max-width: @screen-sm) {
			width: 95%;
		}
	}
</style>